<!-- HTML5文档头 -->
<!DOCTYPE html>
<!-- lang="zh-cn"，此网页基本是中文内容 -->
<html lang="zh-cn">

	<head>
		<meta charset="utf-8" />
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		<!-- 使用最新的IE兼容模式渲染此网页 -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<!-- 在双核浏览器下，默认使用webkit内核，由360浏览器提出 -->
		<meta name="renderer" content="webkit">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>contactus</title>

		<link rel="shortcut icon" href="" />
		<!-- 强大的CSS Reset库 -->
		<link href="http://cdn.bootcss.com/normalize/5.0.0/normalize.css" rel="stylesheet">
		<link rel="stylesheet" href="fonts/font-awesome.min.css" />
		<link rel="stylesheet" href="dist/core.css">
		<!-- 让IE9以下的浏览器支持HTML5标签 -->
		<!--[if lt IE 9]>
        	<script src="http://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
        	<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
		<style>
			/* html,body{margin:0;padding:0;}*/
			
			.iw_poi_title {
				color: #CC5522;
				font-size: 14px;
				font-weight: bold;
				overflow: hidden;
				padding-right: 13px;
				white-space: nowrap;
			}
			
			.iw_poi_content {
				font: 12px arial, sans-serif;
				overflow: visible;
				padding-top: 4px;
				white-space: -moz-pre-wrap;
				word-wrap: break-word;
			}
			
			#dituContent img {
				max-width: none;
			}
		</style>




	</head>

	<body>
		<div class="site_wrapper">
			<div class="retruntop">
				<i class="fa  fa-angle-up"></i>
				<div class="title">TOP</div>
			</div>
			<header class="site_header">
				<div class="content">
					<nav class="nav">
						<ul id="navMenu" class="nav_menu">
							<li class="nav_toggle" id="toggleIcon">
								<i class="fa fa-align-justify"></i>
								<i class="fa fa-close"></i>
							</li>
							<li class="signin_toggle" id="signinIcon">
								<i class="fa fa-user"></i>
							</li>
							<li class="home_logo">
								<img src="img/site_logo.png" />
							</li>
						</ul>
						<ul id="navList" class="nav_list">
							<li class="header_logo">
								<img src="img/site_logo.png" />
							</li>
							<li class="item">
								<a href="index.html">HOME</a>
							</li>
							<li class="item">
								<a href="about-church.html">ABOUT THE CHURCH</a>
							</li>
							<li class="item">
								<div class="inner-list">
									<a href="latest-news.html">LATEST NEWS</a>
									<ul class="item-inner">
										<li>
											<a href="latest-news-nav.html">NEWSNAV</a>
										</li>
									</ul>
								</div>
							</li>
							<li class="item">
								<div class="inner-list">
									<a href="sermons.html">SERMONS</a>
									<ul class="item-inner">
										<li>
											<a href="latest-sermons.html">SERINTRO</a>
										</li>
									</ul>
								</div>
							</li>
							<li class="item">
								<div class="inner-list">
									<a href="events.html">EVENTS</a>
									<ul class="item-inner">
										<li>
											<a href="events2.html">RECOM</a>
										</li>
									</ul>
								</div>
							</li>
							<li class="item item-inner-list">
								<div class="inner-list">
									<a href="medla-gallery.html">MEDIA GALLERY</a>
									<ul class="item-inner">
										<li>
											<a href="medla-gallery-nav.html">GALNAV</a>
										</li>
									</ul>
								</div>
							</li>
							<li class="item">
								<a href="contactus.html" class="current">CONTACT US</a>
							</li>
							<li class="list_down">
								<a>
									<i class="fa fa-list"></i>
									<i class="fa fa-caret-down"></i>
								</a>
								<ul>
									<li>
										<a href="javaScript:;">LOGIN</a>
									</li>
									<li>
										<a href="javaScript:;">REGISTER</a>
									</li>
								</ul>
							</li>
						</ul>
					</nav>
				</div>
			</header>
			<section class="site_container clearfix">
				<div class="content">
					<section class="envent1-top envent1-top3"></section>

					<section class="envent1-saarch">
						<div class="search-center clearfix">
							<div class="center-title fl">
								<h2>CONTACT US</h2>
								<h3 class="title-notice">HERE YOU CAN KEEP IN TOUCH WITH THE CHURCH</h3>
							</div>
							<div class="center-search fr sermons-search">
								<span><i class="fa fa-search"></i></span>
								<input type="text" placeholder="SEARCH THE SITE" />
							</div>
						</div>
					</section>
					<section class="envent1-message1 block">
						<div class="message1-wrapper">
							<h2>Leave A Message</h2>
							<div class="wrapper-inner clearfix">
								<div class="personDate-left fl">
									<div class="personDate-new clearfix">
										<div class="fl">
											<input type="text" placeholder="YOUR NAME" />
										</div>
										<div class="fl">
											<input class="text" type="text" placeholder="YOUR E-MAIL" />
										</div>
										<div class="fl">
											<input class="text" type="text" placeholder="YOUR WEBSITE" />
										</div>
									</div>
									<div class="wrapper-textarea">
										<textarea placeholder="YOUR MESSAGE"></textarea>
									</div>
									<div class="wrapper-submit">
										<input class="text" type="button" value="SUBMIT COMMENT" />
									</div>
								</div>
								<div class="personDate-right fr">
									<!--百度地图容器-->
									<div style="width:100%;height:100%;border:#ccc solid 1px;" id="dituContent"></div>
								</div>
							</div>
						</div>
					</section>
				</div>
			</section>
			<footer class="site_footer ">
				<section class="footer_wrapper clearfix">
					<div class="content  clearfix">
						<div class="footer-inner">
							<div class="inner-left  clearfix">
								<div class="service-wrapper fl">
									<div class="service service-time">
										<h2 class="title">
										<i class="fa fa-clock-o"></i>
										CHURCH SERVICES
									</h2>
										<p class="time">SUNDAY-10:00 AM</p>
										<p class="time">3:00 PM</p>
										<p class="time">6:00 PM</p>
									</div>
									<div class="service service-location">
										<h2 class="title">
										<i class="fa fa-map-marker"></i>
										OUR LOCATION
									</h2>
										<p class="time">237 WEST 51ST ST.</p>
										<p class="time">NEW YORK,NY 10019</p>
									</div>
								</div>
								<div class="theme-pic fl">
									<h2 class="title">CHURCH SERVICES</h2>
									<div class="img">
										<div class="img-circle">
											<img src="img/church-sermons_2.jpeg" />
										</div>
									</div>
								</div>
							</div>
							<div class="inner-right">
								<p>
									Under the Lordship of Jesus Christ, we therefore endeavour to establish communities not only in Montreal but also beyong,where people can have opportunities to enter into living.
								</p>
								<p class="plan">
									Escape is not his plan. I must face him,alone.She must have hidden the plans in the escape pod.Send a detachment down to retrieve them,and see to it.
								</p>
							</div>
						</div>
					</div>
				</section>
				<section class="copyright_wrapper">
					<div class="content   clearfix">
						<div class="copyright clearfix">
							<div class="copyright-left fl">
								COPYRIGHT © THE GOOD NEWS2012,ALL RIGHT RESERVED.
							</div>
							<div class="copyright-right fr">
								DESIGNED WITH LOVE BY
								<a href="#">DANY DUCHAINE</a>
							</div>
						</div>
					</div>
				</section>
			</footer>
		</div>
		<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
		<script src="vendor/jquery.min.js"></script>
		<script src="vendor/jquery.rotate.min.js" ></script>
		<script src="dist/core.js"></script>
		<script>
			$(function() {
				var common = commonjs();
				common.test();
			});
		</script>
		<script type="text/javascript">
			//创建和初始化地图函数：
				function initMap() {
					createMap(); //创建地图
					setMapEvent(); //设置地图事件
					addMapControl(); //向地图添加控件
					addMarker(); //向地图中添加marker
				}

				//创建地图函数：
				function createMap() {
					var map = new BMap.Map("dituContent"); //在百度地图容器中创建一个地图
					var point = new BMap.Point(106.766722, 29.465394); //定义一个中心点坐标
					map.centerAndZoom(point, 10); //设定地图的中心点和坐标并将地图显示在地图容器中
					window.map = map; //将map变量存储在全局
				}

				//地图事件设置函数：
				function setMapEvent() {
					map.enableDragging(); //启用地图拖拽事件，默认启用(可不写)
					map.enableScrollWheelZoom(); //启用地图滚轮放大缩小
					map.enableDoubleClickZoom(); //启用鼠标双击放大，默认启用(可不写)
					map.enableKeyboard(); //启用键盘上下左右键移动地图
				}

				//地图控件添加函数：
				function addMapControl() {
					//向地图中添加缩放控件
					var ctrl_nav = new BMap.NavigationControl({
						anchor: BMAP_ANCHOR_TOP_LEFT,
						type: BMAP_NAVIGATION_CONTROL_ZOOM
					});
					map.addControl(ctrl_nav);
					//向地图中添加缩略图控件
					var ctrl_ove = new BMap.OverviewMapControl({
						anchor: BMAP_ANCHOR_TOP_RIGHT,
						isOpen: 1
					});
					map.addControl(ctrl_ove);
					//向地图中添加比例尺控件
					var ctrl_sca = new BMap.ScaleControl({
						anchor: BMAP_ANCHOR_BOTTOM_LEFT
					});
					map.addControl(ctrl_sca);
				}

				//标注点数组
				var markerArr = [{
					title: "重庆市",
					content: "我的备注",
					point: "106.544804|29.582054",
					isOpen: 0,
					icon: {
						w: 21,
						h: 21,
						l: 0,
						t: 0,
						x: 6,
						lb: 5
					}
				}];
				//创建marker
				function addMarker() {
					for(var i = 0; i < markerArr.length; i++) {
						var json = markerArr[i];
						var p0 = json.point.split("|")[0];
						var p1 = json.point.split("|")[1];
						var point = new BMap.Point(p0, p1);
						var iconImg = createIcon(json.icon);
						var marker = new BMap.Marker(point, {
							icon: iconImg
						});
						var iw = createInfoWindow(i);
						var label = new BMap.Label(json.title, {
							"offset": new BMap.Size(json.icon.lb - json.icon.x + 10, -20)
						});
						marker.setLabel(label);
						map.addOverlay(marker);
						label.setStyle({
							borderColor: "#808080",
							color: "#333",
							cursor: "pointer"
						});

						(function() {
							var index = i;
							var _iw = createInfoWindow(i);
							var _marker = marker;
							_marker.addEventListener("click", function() {
								this.openInfoWindow(_iw);
							});
							_iw.addEventListener("open", function() {
								_marker.getLabel().hide();
							})
							_iw.addEventListener("close", function() {
								_marker.getLabel().show();
							})
							label.addEventListener("click", function() {
								_marker.openInfoWindow(_iw);
							})
							if(!!json.isOpen) {
								label.hide();
								_marker.openInfoWindow(_iw);
							}
						})()
					}
				}
				//创建InfoWindow
				function createInfoWindow(i) {
					var json = markerArr[i];
					var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>" + json.content + "</div>");
					return iw;
				}
				//创建一个Icon
				function createIcon(json) {
					var icon = new BMap.Icon("http://app.baidu.com/map/images/us_mk_icon.png", new BMap.Size(json.w, json.h), {
						imageOffset: new BMap.Size(-json.l, -json.t),
						infoWindowOffset: new BMap.Size(json.lb + 5, 1),
						offset: new BMap.Size(json.x, json.h)
					})
					return icon;
				}

				initMap(); //创建和初始化地图
		</script>

	</body>
</html>
